<template>
  <div>
    <el-card>
      <p>销售收入报表</p>
      <div class="searchArea flex">
        <el-form ref="serachForm"
                 :model="searchForm"
                 :inline="true"
                 style="width:98%"
                 label-position="left"
                 label-width="90px">
          <!-- <el-form-item label="物流单号" prop="expressNum">
            <el-input v-model="searchForm.expressNum" placeholder="请输入物流单号"></el-input>
          </el-form-item> -->
          <el-form-item label="订单时间"
                        prop="timeRange">
            <el-date-picker v-model="searchForm.timeRange"
                            clearable
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
          <!-- <el-form-item label="订单编号" prop="orderNum">
            <el-input v-model="searchForm.orderNum" placeholder="请输入订单编号"></el-input>
          </el-form-item>
          <el-form-item label="收货联系人" prop="name">
            <el-input v-model="searchForm.name" placeholder="请输入收货联系人"></el-input>
          </el-form-item>
          <el-form-item label="收货方电话" prop="mobile">
            <el-input v-model="searchForm.mobile" placeholder="请输入收货方电话"></el-input>
          </el-form-item> -->
          <el-form-item prop="action">
            <el-button type='primary'
                       @click="getOrderList">搜索  </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="tableBoxTop">
        <div class='titles'>
          <span class='nums'>订单数量</span>
          <span class='nums'>订单总额</span>
          <span class='nums'>销售总额</span>
          <span class='nums'>物流成本</span>
          <span class='nums'>销售利润</span>
        </div>
        <div class='counted'>
          <span class='nums'>{{this.allCount}}</span>
          <span class='nums'>{{totalPrice}}</span>
          <span class='nums'>{{totalPay}}</span>
          <span class='nums'>{{allCost}}</span>
          <span class='nums'>{{totalProfit}}</span>
        </div>

      </div>
      <div class="tableBox">
        <el-table :data="tableData"
                  style="width: 100%"
                  height="500"
                  stripe>
          <el-table-column prop="add_time"
                           label="订单时间"
                           align="center"></el-table-column>
          <el-table-column prop="order_id"
                           label="订单号"
                           align="center"></el-table-column>
          <el-table-column prop="real_name"
                           label="收货人"
                           align="center"></el-table-column>
          <el-table-column prop="user_phone"
                           label="收货人电话"
                           align="center"></el-table-column>
          <el-table-column prop="pay_type"
                           label="付款方式"
                           align="center"></el-table-column>
          <el-table-column prop="status"
                           label="状态"
                           align="center"></el-table-column>
          <el-table-column label="操作"
                           align="center"
                           fixed="right">
            <template slot-scope="scope">
              <el-button type="primary"
                         size="mini"
                         @click="checkDetail(scope.row,scope.$index)">报表详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="text-align:center;margin-top:20px"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[5, 10, 15, 20]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total"></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ADMINORDERLIST } from '@/utils/api'
import axios from 'axios'
import { formatDate } from '@/utils/validate.js'
export default {
  data () {
    return {
      searchForm: {
        expressNum: null,
        timeRange: [],
        name: null,
        orderPlateform: null,
        orderNum: null,
        mobile: null
      },
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 50,
      allCount: '', //订单数量
      totalPrice: '', //订单总额
      totalPay: '', //销售总额
      allCost: '', //物流成本
      totalProfit: '' //销售利润
    }
  },
  mounted () {
    this.getlist()
    this.countMoney()
  },
  methods: {
    countMoney () {
      let param = {
        page: this.currentPage,
        pagesize: this.pageSize
      } // 创建form对象
      let config = {
        headers: { 'Content-Type': 'application/json' }
      }
      var that = this
      axios.post('http://fox.foxcore.cn/api/v1/redirect/orderListCount', param, config).then(res => {
        console.log('后台数据统计金额', res.data)
        console.log('1------------', res.data.data.all_count)
        this.allCount = res.data.data.all_count
        this.totalPrice = res.data.data.total_price
        this.totalPay = res.data.data.total_pay
        this.allCost = res.data.data.all_cost
        this.totalProfit = res.data.data.total_profit
        // totalPay: '', //销售总额
        // allCost: '', //物流成本
        // totalProfit: '' //销售利润
      })
    },
    checkDetail (row, index) {
      this.$router.push({
        path: 'receiveDetail',
        query: {
          data: row,
          handler: 'check'
        }
      })
    },
    getlist () {
      let param = {
        //        delivery_id:this.searchForm.expressNum,
        //        order_id:this.searchForm.orderNum,
        //        user_phone:this.searchForm.mobile,
        //        real_name:this.searchForm.name,
        //        start_time:new Date(this.searchForm.timeRange[0]).getTime()/1000,
        //        end_time:new Date(this.searchForm.timeRange[1]).getTime()/1000,
        page: this.currentPage,
        pagesize: this.pageSize
      } // 创建form对象
      let config = {
        headers: { 'Content-Type': 'application/json' }
      }
      var that = this
      axios
        .post('http://fox.foxcore.cn/api/v1/redirect/adminOrderList', param, config)
        .then(response => {
          console.log(response.data.data, 'ressssss')
          this.tableData = response.data.data.data
          this.total = response.data.data.all_count
          for (let i in this.tableData) {
            this.tableData[i].add_time = this.formatSecond(this.tableData[i].add_time)
            if (this.tableData[i].status == 0) {
              this.tableData[i].status = '待付款'
            } else if (this.tableData[i].status == 1) {
              this.tableData[i].status = '待收货'
            } else if (this.tableData[i].status == 2) {
              this.tableData[i].status = '待发货'
            } else if (this.tableData[i].status == 3) {
              this.tableData[i].status = '待评价'
            } else if (this.tableData[i].status == 6) {
              this.tableData[i].status = '已评价'
            } else if (this.tableData[i].status == -1) {
              this.tableData[i].status = '退换货订单'
            } else if (this.tableData[i].status == 4) {
              this.tableData[i].status = '已完成'
            }
          }
        })
    },
    getOrderList () {
      //    if(!this.searchForm.timeRange[0]){
      //      this.$message.error('请输入日期')
      //      return
      //    }
      let param = {
        delivery_id: this.searchForm.expressNum,
        order_id: this.searchForm.orderNum,
        user_phone: this.searchForm.mobile,
        real_name: this.searchForm.name,
        start_time: new Date(this.searchForm.timeRange[0]),
        end_time: new Date(this.searchForm.timeRange[1]),
        page: this.currentPage,
        pagesize: this.pageSize
      } // 创建form对象
      let config = {
        headers: { 'Content-Type': 'application/json' }
      }
      var that = this
      axios
        .post('http://fox.foxcore.cn/api/v1/redirect/adminOrderList', param, config)
        .then(response => {
          console.log(response.data.data)
          this.tableData = response.data.data.data
          this.total = response.data.data.all_count
          for (let i in this.tableData) {
            this.tableData[i].add_time = this.formatSecond(this.tableData[i].add_time)
            if (this.tableData[i].status == 0) {
              this.tableData[i].status = '待付款'
            } else if (this.tableData[i].status == 1) {
              this.tableData[i].status = '待收货'
            } else if (this.tableData[i].status == 2) {
              this.tableData[i].status = '待发货'
            } else if (this.tableData[i].status == 3) {
              this.tableData[i].status = '待评价'
            } else if (this.tableData[i].status == 6) {
              this.tableData[i].status = '已评价'
            } else if (this.tableData[i].status == -1) {
              this.tableData[i].status = '退换货订单'
            } else if (this.tableData[i].status == 4) {
              this.tableData[i].status = '已完成'
            }
          }
        })
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.getOrderList()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
      this.getOrderList()
    },
    //时间格式化
    formatSecond (second) {
      if (!second) return ''
      return formatDate(new Date(second * 1000), 'yyyy-MM-dd hh:mm:ss')
    }
  }
}
</script>

<style lang="scss" scoped>
.tableBoxTop {
  width: 100%;
  height: 100px;
  // background: pink;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.titles {
  width: 100%;
  height: 50%;
  // background: red;
  display: flex;
  flex-direction: row;
  justify-content: center;
  line-height: 50px;
}
.nums {
  width: 20%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.counted {
  width: 100%;
  height: 50%;
  // background: blue;
  display: flex;
  flex-direction: row;
  justify-content: center;
  line-height: 50px;
}
p {
  font-size: 20px;
  padding: 10px 0;
}
.searchArea {
  width: 100%;
  padding: 15px 0;
  margin-top: 15px;
  justify-content: center;
  background: #eee;
  padding-bottom: 0;
}
.tableBox {
  width: 100%;
  background: #fff;
  margin-top: 15px;
  padding: 10px 2px;
  border-radius: 5px;
  // box-shadow: 2px 3px 15px 0 #ccc;
}
</style>
<style>
.el-date-editor .el-range-separator {
  padding: 0 !important;
}
</style>